<template>
  <div class="roles-container">
    <!-- 面包屑导航 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>-->
    <bread :second="'权限管理'" :third="'角色列表'"></bread>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div style="margin-top: 15px;">
        <el-button type="primary" @click="roleAdd">添加角色</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" border="" style="width: 100%;margin:20px 0">
          <el-table-column type="expand">
            <template slot-scope="scoped">
              <!-- ==={{scoped.row}}=== -->
              <div style="border-bottom:1px  solid  #ccc">
                <el-row v-for="(item1,index1) in scoped.row.children" :key="index1">
                  <el-col :span="8">
                    <div>
                      <!-- 左边 -->
                      <!-- 一级 -->
                      <el-tag closable>{{item1.authName}}</el-tag>
                      <span class="el-icon-caret-right"></span>
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <div>
                      <!-- 右边 -->
                      <el-row v-for="(item2,index2) in item1.children" :key="index2">
                        <el-col :span="8">
                          <div>
                            <!-- 二级 -->
                            <el-tag type="warning" closable>{{item2.authName}}</el-tag>
                            <span class="el-icon-caret-right"></span>
                          </div>
                        </el-col>
                        <el-col :span="16">
                          <div>
                            <!-- 三级 -->
                            <el-tag
                              style="margin:5px;"
                              type="danger"
                              v-for="(item3,index3) in item2.children"
                              :key="index3"
                              closable
                            >{{item3.authName}}==={{item3.id}}</el-tag>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50" label="#"></el-table-column>
          <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
          <el-table-column prop="roleDesc" label="角色描述" width="180"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scoped">
              <!-- <pre>
                {{scoped.row}}
              </pre> -->
              <el-button size="mini" type="primary" icon="el-icon-search">编辑</el-button>
              <el-button size="mini" type="info" icon="el-icon-search">删除</el-button>
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-search"
                @click="fpRoles(scoped.row)"
              >分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 添加用户的表单对话框 -->
    <el-dialog title="分配权限" :visible.sync="dialogFormVisibleRoles">
      <!-- 树形组件 -->
      <el-tree
      ref="tree"
        :data="treeList"
        show-checkbox
        node-key="id"
        :default-checked-keys="defaultKey"
        :props="defaultProps"
        :default-expand-all="true"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRightsDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
           
<script>
import { rolesAll_api, rolesAdd_api, rightsAll_api,rolesToRights_api } from '@/api'
export default {
  data() {
    return {
      tableData: [],
      roleObj: {
        roleName: '经理',
        roleDesc: '最高权限3'
      },

      /* 分配权限 */
      dialogFormVisibleRoles: false,
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      defaultKey: [], //  显示默认权限的  并且是第三级的id值
      roleParams:{
        roleId:'',
        rids:''
      }
    }
  },
  created() {
    this.getRoles()
  },
  methods: {
    async getRoles() {
      const { data: res } = await rolesAll_api()
     // console.log(res, 4444)
      this.tableData = res.data
    },

    async roleAdd() {
      const { data: res } = await rolesAdd_api(this.roleObj)
      //console.log(res, 45555)
    },

    /* 分配权限 */
    addForm() {},
    //分配权限按钮=====显示对话框
    async fpRoles(row) {
      this.roleParams.roleId=row.id//  获取角色id
      this.defaultKey=[]  //  每次进入就初始化之前选中的id值
      
      const { data: res } = await rightsAll_api('tree')
      // console.log(res, 5666)
      this.treeList = res.data
      //  获取当前点击行的数据
     // console.log(row, 4455)

      //  递归函数 找row中的最里层的children  找到了后获取最里层的id  ，并将这个id  追加到  defaultKey数组中
      this.digui(row, this.defaultKey)
      this.dialogFormVisibleRoles = true
      //console.log(this.defaultKey,8888);
    },

    //  封装的递归函数
    digui(row, arr) {
      /* 
      1、如果你有children  就继续找，如果没有直接获取id并且终止
      */
      if (!row.children) {
        return arr.push(row.id)
      }
      //  这里是有children
      row.children.forEach(item => {
        this.digui(item, arr)
      })
    },

    //  点击对话框的确认按钮
    async addRightsDialog(){
      /* 获取rids===所选中的id值集合 */
      var  keys=[
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
      ]
      this.roleParams.rids=keys.join()

      //console.log( this.roleParams,9999);

      //  f发送请求角色授权
      const  {data:res}=await rolesToRights_api(this.roleParams)
      console.log(res,3333);

      
       //  重新获取数据
       this.getRoles()
       //  关闭对话框
       this.dialogFormVisibleRoles = false

    }
  }
}
</script>
<style scoped lang='less'>
.roles-container {
  .el-breadcrumb {
    margin-bottom: 20px;
  }

  .box-card {
    .iptBox {
    }

    .el-row {
      border-top: 1px solid #ccc;
      padding: 5px 0;
      &:nth-child(1) {
        border-top: 0px solid #000;
      }
    }
  }
}
</style>